<!-- template 就是 页面.wxml 结构部分 -->
<template>
	<!-- vue 的结构必须有一个根标签包裹所有内容 -->
	<view>
		<!-- 全局注册的搜索框组件 -->
		<search></search>
		<!-- 自定义 tab 栏组件，属性父传子，子组件根据父组件的数据展示 -->
		<!-- 注意事项: uni-app 的组件属性不要出现大写 -->
		<tabs :tabs-data="tabsData" @get-tabs-index="getIndexHandle">
			<!-- 在自定义组件标签中，可以传入结构，由 slot 插槽接收 -->
			<view v-if="goods.length === 0">
				空列表
			</view>
			<view v-else class="goods_list">
				<block v-for="(item,index) in goods" :key="item.goods_id">
					<view class="goods">
						<image class="goods_image" :src="item.goods_small_logo || '/static/images/default.png'" mode="aspectFill"></image>
						<view class="goods_info">
							<view class="goods_name">
								{{ item.goods_name }}
							</view>
							<view class="goods_price">
								{{ item.goods_price }}
							</view>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
						<goods-item :item="item"></goods-item>
					<!-- #endif -->
				</block>
			</view>
		</tabs>
		<!-- <input type="text" v-model="aaa" /> -->
	</view>
</template>

<!-- script 就是 页面.js 脚本部分 -->
<script>
	import axios from '@/request/myAxios.js';
	// import axios from '../../request/myAxios.js';
	export default {
		// 页面数据，也是 vue 的写法
		data() {
			return {
				aaa:11,
				// goods 商品列表数据
				goods:[],
				// tab 栏数据
				tabsData:[
					{
						id: 1,
						text: '综合'
					},
					{
						id: 2,
						text: '销量'
					},
					{
						id: 3,
						text: '价格'
					}
				],
			}
		},
		// 生命周期函数用小程序的
		onLoad() {
			console.log(this);
			this.getIndexHandle({index:0});
		},
		// 事件处理函数，在 vue 文件中，就要写到 methods 中
		methods: {
			// 在 uni-app 中，内部已经集成了 runtime.js ，所以 async await 可以直接使用
			async getIndexHandle({index}){
				// 根据索引值获取到子组件的文字
				const { text } = this.tabsData[index];
				// 根据子组件的文字发送请求
				const { goods } = await axios({url:'/goods/search',data:{query:text}});
				// 更新页面数据
				this.goods = goods;
			}
		}
	}
</script>


<!-- style 就是 页面.wxss 样式部分 -->
<style lang="less">
	// 3.0 商品列表
	.goods{
	    display: flex;
	    padding: 20rpx;
	    &_image{
	        width: 190rpx;
	        height: 190rpx;
	        margin-right: 20rpx;
	    }
	    &_info{
	        flex: 1;
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;   
	    }
	    &_name{
	        font-size: 24rpx;
	        overflow: hidden;            
	        text-overflow: ellipsis ;           
	        display: -webkit-box ;           
	        -webkit-line-clamp: 2;            
	        -webkit-box-orient: vertical;
	    }
	    &_price{
	        font-size: 32rpx;
	        color: #eb4450;
	        &::before{
	            content: "¥";
	            font-size: 80%;
	        }
	    }
	}
</style>
